<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--<script type="text/javascript" src="../src/jmchart.debug.js" id="jmgraph" ></script>-->

		<style>
		html,body {
			margin:0;
			padding:0;
			width:100%;
			height:100%;
		}
		</style>
		<script type="module">
			//window.devicePixelRatio = 1;
			import { jmChart } from '../dist/jmchart.esm.js';

			(function load() {
				var w = Math.max((window.innerWidth || window.document.body.clientWidth) * 0.9, 600);
				var h = Math.max((window.innerHeight || window.document.body.clientHeight) * 0.6, 200);			
				inichart(w,h);
			})();
			

			function inichart(w, h) {
				var touchCanvas = document.getElementById('mytouchcanvas');
					var chart = new jmChart('mycanvas', {
						width: w,
						height: h,
						xField: 'x',
						baseY: 0, // Y轴基线的值 不填就会用最 小值
						// 最大和最小X值，  这里一般不用指定，除非硬是需要
						//minXValue : 0,
						//maxXValue : 10,
						//minYValue: -200,
						//maxYValue: 300,
						autoRefresh: true,
						// 指定了操作层的canvas，如果不想自已指定，也可以把touchGraph设置为true也是一样的效果
						touchCanvas,
						style: {
							axis: {
								x: true,
								y: true
							},
							markLine: {
								longtap: false, //  长按才出现标线
								lock: {
									y: 10,
									x: 10
								}
							},
							margin: {
								
								bottom: 2
							},
						}
					});
					chart.legend.legendPosition = 'top';
					chart.legend.visible = true;
					chart.enableAnimate = true;

					// touch改变数据点事件
					chart.on('touchPointChange', function(args) {
						//console.log(args);
					});

					chart.on('marklinestartmove', (args)=>{
						
					});

					
					chart.on('marklinemove', (args)=>{
							
					});
					
					
					var bar1 = chart.createSeries('bar', {
						field: 'y1',
						style: {
							// 渐变色
							color: 'linear-gradient(50% 0 50% 100%, #ccc 0, #000 0.5, #fff 1)', 
							perWidth: 0.5, //  控制barWidth占比，优先级比barWidth低
							//barWidth: 80,// 优先级最高
							label: {
								show: true,
								offset: 10, // 离柱偏移量
								shadow: {
									x: 0,
									y: 0,
									blur: 0,
									color: 'transparent'
								},
								fill: function(point) {
									//console.log(point);
									if(point.yValue < 0) return 'green';
									else return 'red';
								}
							}
						},
						itemLabelFormat(p) {
							return p.yValue.toFixed(2);
						},
						// 图例格式化，如果不给定，则采用legendLabel
						legendFormat: function(options) {
							return '图1';
						},
						yLabelFormat: (v, label) => {
							return v.toFixed(0);
						}
					});		
					
					var bar2 = chart.createSeries('bar', {
						field: 'y8',
						style: {
							// 自定义单个bar的颜色
							color: function(p) {
								if(p && p.xValue == 3) {
									return 'green';
								}
								// 默认值
								return 'linear-gradient(50% 0 50% 100%, #ff0000 0, #00ff00 0.5, #0000ff 1)';
							},
							label: {
								show: false,
								offset: 5 // 离柱偏移量
							}
						},
						// 图例格式化，如果不给定，则采用legendLabel
						legendFormat: function(options) {
							return '图4';
						},
						yLabelFormat: (v, label) => {
							return v.toFixed(0);
						}
					});
		
					const datacount = 5;
					function animate() {
						if(true) {
							chart.data = [];
							for(var i = 0;i<datacount;i++) {
								var data = {
									x : i,
									y1 :  Math.random() * 200 - 100,
									y2: Math.random() * 200 + 50,
									y3: Math.random() * 200 + 50,
									y4:Math.random() * 200 + 50,
									y5:Math.random() * 200 + 50,
									y6:Math.random() * 200 + 50,
									y7:i,
									y8:Math.random() * 200 - 50,
									y9:Math.random() * 200 - 50,
									y10:Math.random() * 200 - 50
								};
								if(i == 3) {
									data.y = null;
								}
								chart.data.push(data);
							}
						}
						else {
							for(var i=datacount-1;i>0;i--) {
								var x = chart.data[i].x;
								chart.data[i] = chart.utils.clone(chart.data[i - 1]);
								chart.data[i].x = x;
							}
							
								chart.source[0] = {
									x : chart.data[0].x,
									y : Math.random() * 200 - 100
								};
								
						}
						
						//setTimeout(animate,500);
						chart.refresh();
						console.log(chart.data);
					}
					
					animate();
					chart.utils.bindEvent(document.getElementById('btnRedraw'),'click',animate);
					
				}
		</script>
	</head>
	<body>
		<div>
			<canvas id="mycanvas">
			</canvas>	
			<canvas id="mytouchcanvas" style="position: absolute; left:0; top: 0;">
			</canvas>
		</div>
			<button id="btnRedraw">重绘</button>		
	</body>
</html>